<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '推广大使认证',
  },
}
</route>

<template>
  <div class="apply-from">
    <div class="title">实名认证</div>

    <wd-form custom-class="custom-form2" ref="form" :model="mode">
      <wd-cell title="真实姓名" title-width="150rpx">
        <wd-input
          type="text"
          v-model="mode.name"
          prop="name"
          :rules="[{ required: true, message: '请输入真实姓名' }]"
          placeholder="请输入真实姓名"
          suffix-icon="edit"
        />
      </wd-cell>
      <wd-cell title="性别" title-width="150rpx">
        <wd-picker
          :columns="classify"
          v-model="mode.sex"
          prop="sex"
          placeholder="请选择性别"
          :rules="[{ required: true, message: '请选择性别' }]"
        />
      </wd-cell>
      <wd-cell title="生日" title-width="150rpx">
        <wd-datetime-picker
          v-model="mode.birthday"
          placeholder="请选择生日"
          prop="birthday"
          type="date"
          :displayFormat="displayFormat"
          :rules="[{ required: true, message: '请选择生日' }]"
        />
      </wd-cell>
      <wd-cell title="手机号" title-width="150rpx">
        <wd-input
          prop="phone"
          clearable
          v-model="mode.phone"
          placeholder="请输入手机号"
          :rules="[{ required: true, message: '请输入手机号' }]"
          suffix-icon="edit"
        />
      </wd-cell>
      <wd-cell title="验证码" title-width="150rpx">
        <wd-input v-model="mode.code" prop="code" placeholder="请输入验证码" use-suffix-slot>
          <template #suffix>
            <div class="sms-code active" @click="sendCode(true)">
              {{ second > 0 ? `${second}s后再试` : '获取验证码' }}
            </div>
          </template>
        </wd-input>
      </wd-cell>
      <wd-cell title="邮箱" title-width="150rpx">
        <wd-input
          type="text"
          v-model="mode.email"
          prop="email"
          :rules="[{ required: true, message: '请输入邮箱地址' }]"
          placeholder="请输入邮箱地址"
          suffix-icon="edit"
        />
      </wd-cell>
      <wd-cell title="地区" title-width="150rpx">
        <wd-input
          type="text"
          v-model="mode.region"
          prop="region"
          :rules="[{ required: true, message: '请输入地区' }]"
          placeholder="请输入地区"
          suffix-icon="edit"
        />
      </wd-cell>
      <wd-cell title="身份证号" title-width="150rpx">
        <wd-input
          type="text"
          v-model="mode.idCardNo"
          prop="idCardNo"
          :rules="[{ required: true, message: '请输入身份证号' }]"
          placeholder="请输入身份证号"
          suffix-icon="edit"
        />
      </wd-cell>
      <wd-cell
        title="上传证件照片"
        custom-class="vertical-cell"
        prop="idCardBackUrl"
        vertical
        title-width="250rpx"
      >
        <div class="photo-group">
          <div class="item mr-20rpx">
            <image
              class="photo active"
              :src="mode.idCardFrontUrl || '/static/images/card-1.png'"
              mode="aspectFit"
              @click="chooseAvatar('idCardFrontUrl')"
            />
            <div class="title">证件正面</div>
          </div>
          <div class="item">
            <image
              class="photo active"
              :src="mode.idCardBackUrl || '/static/images/card-2.png'"
              mode="aspectFit"
              @click="chooseAvatar('idCardBackUrl')"
            />
            <div class="title">证件背面</div>
          </div>
        </div>
      </wd-cell>
    </wd-form>

    <div class="bottom-box">
      <div class="agreement">
        <wd-checkbox
          custom-class="login-custom-checkbox"
          v-model="agreement"
          checked-color="#1F2026"
        >
          我已阅读并同意
        </wd-checkbox>
        <span class="active" @click="toAgreement('user_service1')">《推广大使服务条款》</span>
      </div>
      <div class="btn-group">
        <button class="custom-button" @click="handleSubmit()">提交</button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { msgSuccess, msgNone } from '@/utils/index'
import { redirect } from '@/utils/page'
import { useUserStore } from '@/store/user'

const form = ref()
const agreement = ref(false)
const mode = reactive({
  name: '',
  birthday: '',
  email: '',
  sex: '',
  phone: '',
  code: '',
  region: '',
  idCardNo: '',
  idCardFrontUrl: '',
  idCardBackUrl: '',
})
const classify = ref<any>([
  { label: '男', value: 1 },
  { label: '女', value: 2 },
])

const userStore = useUserStore()
uni.showLoading()
http
  .get('/general-members-app/detail', {
    userId: userStore.userInfo.userId,
  })
  .then((res) => {
    if (res) {
      Object.assign(mode, res)
    }
  })
  .finally(() => {
    uni.hideLoading()
  })

function handleSubmit() {
  form.value.validate().then(({ valid }) => {
    if (valid) {
      if (agreement.value) {
        uni.showLoading()
        http
          .post('/general-members-app/apply', mode)
          .then(() => {
            msgSuccess('提交成功').then(() => {
              redirect('/pages-sub/join-in/success')
            })
          })
          .finally(() => {
            uni.hideLoading()
          })
      } else {
        msgNone('请先阅读并勾选协议')
      }
    }
  })
}

function chooseAvatar(path) {
  mode[path] =
    'http://39.108.7.196:9000/homestay-hotels/upload/20240717/df995d0085494409b8d35a2f0b524b0c.png'
  // uni.chooseImage({
  //   count: 1, // 默认9
  //   sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
  //   success(res) {
  //     if (res.errMsg === 'chooseImage:ok') {
  //       uni.showLoading()
  //       http
  //         .uploadFile(res.tempFilePaths[0])
  //         .then((r: any) => {})
  //         .finally(() => {
  //           uni.hideLoading()
  //         })
  //     }
  //   },
  // })
}

function toAgreement(type) {
  uni.navigateTo({
    url: `/pages-sub/system/agreement?type=${type}`,
  })
}

function displayFormat(items) {
  return `${items[0].label}年${items[1].label}月${items[2].label}日`
}

const second = ref(0)
function sendCode(click = false) {
  if (click && second.value > 0) {
    return
  }
  if (second.value === 0) {
    second.value = 60
    setTimeout(sendCode, 1000)
  } else {
    second.value--
    if (second.value > 0) {
      setTimeout(sendCode, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import url(./style.scss);
</style>
